<template>
  <div class="user-panel">
    <div class="user-panel-header">
      <h3>用户管理</h3>
      <button class="add-btn" @click="openAdd">新增用户</button>
    </div>
    <table class="user-table">
      <thead>
        <tr>
          <th>用户名</th>
          <th>邮箱</th>
          <th>角色</th>
          <th>状态</th>
          <th>注册时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.username }}</td>
          <td>{{ user.email }}</td>
          <td>{{ getRoleName(user.role) }}</td>
          <td>
            <span :class="['status', user.enabled ? 'enabled' : 'disabled']">{{ user.enabled ? '启用' : '禁用' }}</span>
            <button class="status-btn" @click="toggleStatus(user)">{{ user.enabled ? '禁用' : '启用' }}</button>
          </td>
          <td>{{ user.createdAt }}</td>
          <td>
            <button class="edit-btn" @click="openEdit(user)">编辑</button>
            <button class="delete-btn" @click="remove(user.id)">删除</button>
            <button class="reset-btn" @click="resetPwd(user)">重置密码</button>
          </td>
        </tr>
        <tr v-if="!users.length">
          <td colspan="6" style="text-align:center;color:#aaa;">暂无用户</td>
        </tr>
      </tbody>
    </table>
    <!-- 弹窗表单 -->
    <div v-if="showDialog" class="dialog-mask">
      <div class="dialog-box">
        <h4>{{ editId ? '编辑用户' : '新增用户' }}</h4>
        <form @submit.prevent="save">
          <div class="form-row">
            <label>用户名：</label>
            <input v-model="form.username" required />
          </div>
          <div class="form-row">
            <label>邮箱：</label>
            <input v-model="form.email" type="email" required />
          </div>
          <div class="form-row">
            <label>角色：</label>
            <select v-model="form.role">
              <option v-for="r in roles" :key="r.key" :value="r.key">{{ r.name }}</option>
            </select>
          </div>
          <div class="form-row">
            <label>状态：</label>
            <input type="checkbox" v-model="form.enabled" />
            <span class="switch-label">{{ form.enabled ? '启用' : '禁用' }}</span>
          </div>
          <div class="dialog-actions">
            <button type="submit" class="save-btn">保存</button>
            <button type="button" class="cancel-btn" @click="closeDialog">取消</button>
          </div>
        </form>
      </div>
    </div>
    <!-- 重置密码提示 -->
    <div v-if="resetMsg" class="msg">{{ resetMsg }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const roles = [
  { key: 'admin', name: '管理员' },
  { key: 'editor', name: '内容编辑' },
  { key: 'user', name: '普通用户' },
];
const users = ref([
  { id: 1, username: 'admin', email: 'admin@example.com', role: 'admin', enabled: true, createdAt: '2025-07-01' },
  { id: 2, username: 'editor', email: 'editor@example.com', role: 'editor', enabled: true, createdAt: '2025-07-01' },
  { id: 3, username: 'user1', email: 'user1@example.com', role: 'user', enabled: false, createdAt: '2025-07-02' },
]);
const showDialog = ref(false);
const editId = ref(null);
const form = ref({ username: '', email: '', role: 'user', enabled: true });
const resetMsg = ref('');
function openAdd() {
  editId.value = null;
  form.value = { username: '', email: '', role: 'user', enabled: true };
  showDialog.value = true;
}
function openEdit(user) {
  editId.value = user.id;
  form.value = { username: user.username, email: user.email, role: user.role, enabled: user.enabled };
  showDialog.value = true;
}
function closeDialog() {
  showDialog.value = false;
}
function save() {
  if (editId.value) {
    // 编辑
    const idx = users.value.findIndex(i => i.id === editId.value);
    if (idx > -1) {
      users.value[idx].username = form.value.username;
      users.value[idx].email = form.value.email;
      users.value[idx].role = form.value.role;
      users.value[idx].enabled = form.value.enabled;
    }
  } else {
    // 新增
    users.value.push({
      id: Date.now(),
      username: form.value.username,
      email: form.value.email,
      role: form.value.role,
      enabled: form.value.enabled,
      createdAt: new Date().toISOString().slice(0, 10)
    });
  }
  showDialog.value = false;
}
function remove(id) {
  users.value = users.value.filter(i => i.id !== id);
}
function toggleStatus(user) {
  user.enabled = !user.enabled;
}
function resetPwd(user) {
  resetMsg.value = `用户 ${user.username} 密码已重置为 123456`;
  setTimeout(() => { resetMsg.value = ''; }, 1800);
}
function getRoleName(key) {
  const r = roles.find(r => r.key === key);
  return r ? r.name : key;
}
</script>

<style scoped>
.user-panel {
  width: 100%;
}
.user-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.add-btn {
  background: #1976d2;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 18px;
  cursor: pointer;
  font-size: 15px;
  transition: background 0.2s;
}
.add-btn:hover {
  background: #1256a3;
}
.user-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.user-table th, .user-table td {
  padding: 12px 10px;
  border-bottom: 1px solid #f0f0f0;
  text-align: left;
}
.user-table th {
  background: #f4f6fa;
  color: #555;
}
.status.enabled {
  color: #43a047;
  font-weight: bold;
}
.status.disabled {
  color: #f44336;
  font-weight: bold;
}
.status-btn {
  background: none;
  border: none;
  color: #1976d2;
  cursor: pointer;
  font-size: 14px;
  margin-left: 8px;
}
.status-btn:hover {
  text-decoration: underline;
}
.edit-btn, .delete-btn, .reset-btn {
  background: none;
  border: none;
  color: #1976d2;
  cursor: pointer;
  margin-right: 8px;
  font-size: 14px;
}
.delete-btn {
  color: #f44336;
}
.reset-btn {
  color: #888;
}
.edit-btn:hover, .delete-btn:hover, .reset-btn:hover {
  text-decoration: underline;
}
.dialog-mask {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.dialog-box {
  background: #fff;
  border-radius: 8px;
  padding: 28px 32px 18px 32px;
  min-width: 320px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.10);
}
.form-row {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}
.form-row label {
  width: 70px;
  color: #555;
}
.form-row input, .form-row select {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 15px;
}
.switch-label {
  color: #1976d2;
  font-size: 15px;
  margin-left: 6px;
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.save-btn {
  background: #1976d2;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 18px;
  cursor: pointer;
  font-size: 15px;
}
.cancel-btn {
  background: #eee;
  color: #333;
  border: none;
  border-radius: 4px;
  padding: 6px 18px;
  cursor: pointer;
  font-size: 15px;
}
.save-btn:hover {
  background: #1256a3;
}
.cancel-btn:hover {
  background: #ccc;
}
.msg {
  color: #43a047;
  margin-top: 8px;
  font-size: 15px;
}
</style>
